<template>
	<view class="detail-leave-page">
		<!-- 导航栏 -->
		<u-navbar
			title="请假详情"
			:border="false"
			:auto-back="true"
			:bg-color="'#FFFFFF'"
			:title-color="'#333333'"
			:title-size="32"
			:title-weight="'500'"
			placeholder
		/>

		<!-- 详情内容 -->
		<view class="detail-content">
			<!-- 状态信息 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">状态信息</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">请假状态</text>
						<text class="info-value status-tag" :class="getStatusClass(leaveDetail.billStatus)">
							{{ leaveDetail.billStatusName || '未知' }}
						</text>
					</view>
				</view>
			</view>

			<!-- 请假类型 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">请假类型</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">请假类型</text>
						<text class="info-value">{{ leaveDetail.leaveTypeName || '未知' }}</text>
					</view>
				</view>
			</view>

			<!-- 时间信息 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">时间信息</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">申请日期</text>
						<text class="info-value">{{ leaveDetail.bizDate || '未知' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">开始时间</text>
						<text class="info-value">{{ leaveDetail.startTime || '未知' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">结束时间</text>
						<text class="info-value">{{ leaveDetail.endTime || '未知' }}</text>
					</view>
				</view>
			</view>

			<!-- 时长信息 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">时长信息</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">请假时长(天)</text>
						<text class="info-value">{{ leaveDetail.durationDays || 0 }} 天</text>
					</view>
					<view class="info-item">
						<text class="info-label">请假时长(小时)</text>
						<text class="info-value">{{ leaveDetail.durationHours || 0 }} 小时</text>
					</view>
					<view class="info-item">
						<text class="info-label">有薪请假时长(天)</text>
						<text class="info-value">{{ leaveDetail.durationPaidDays || 0 }} 天</text>
					</view>
					<view class="info-item">
						<text class="info-label">有薪请假时长(小时)</text>
						<text class="info-value">{{ leaveDetail.durationPaidHours || 0 }} 小时</text>
					</view>
				</view>
			</view>

			<!-- 请假事由 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">请假事由</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">请假事由</text>
						<text class="info-value">{{ leaveDetail.description || '无' }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部安全区域 -->
		<view class="safe-area-bottom"></view>
		
		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<button 
				v-if="canEdit" 
				class="edit-btn" 
				@click="goToEdit"
			>
				<text class="btn-text">编辑</text>
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { leaveApi } from '@/api/api-helper.js'

// 请假详情数据
const leaveDetail = reactive({
	id: '',
	leaveTypeName: '',
	startTime: '',
	endTime: '',
	duration: 0,
	durationDays: 0,
	durationHours: 0,
	durationPaidDays: 0,
	durationPaidHours: 0,
	description: '',
	billStatus: '',
	billStatusName: '',
	bizDate: ''
})

// 页面参数
const pageParams = ref({
	id: ''
})

// 计算是否可以编辑 - 只有"暂存"状态才能编辑
const canEdit = computed(() => {
	return leaveDetail.billStatus === '1' // 1: 暂存
})

// 加载详情数据
const loadDetailData = async () => {
	if (!pageParams.value.id) return
	
	try {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		
		const response = await leaveApi.getLeaveDetail(pageParams.value.id)
		uni.hideLoading()
		
		if (response.code === 200) {
			const data = response.data
			
			// 更新详情数据
			leaveDetail.id = data.id || ''
			leaveDetail.leaveTypeName = data.leaveTypeName || ''
			leaveDetail.startTime = data.startTime || ''
			leaveDetail.endTime = data.endTime || ''
			leaveDetail.duration = data.duration || 0
			leaveDetail.durationDays = data.durationDays || 0
			leaveDetail.durationHours = data.durationHours || 0
			leaveDetail.durationPaidDays = data.durationPaidDays || 0
			leaveDetail.durationPaidHours = data.durationPaidHours || 0
			leaveDetail.description = data.description || ''
			leaveDetail.billStatus = data.billStatus || ''
			leaveDetail.billStatusName = data.billStatusName || ''
			leaveDetail.bizDate = data.bizDate || ''
			
			console.log('已加载请假详情数据:', leaveDetail)
		} else {
			uni.showToast({
				title: response.msg || '加载详情失败',
				icon: 'none'
			})
		}
	} catch (error) {
		uni.hideLoading()
		console.error('加载请假详情数据失败:', error)
		uni.showToast({
			title: '网络错误',
			icon: 'none'
		})
	}
}

// 页面加载时获取参数
onLoad((options) => {
	console.log('=== onLoad 触发 ===')
	console.log('页面参数 options:', options)
	
	// 直接从 options 获取参数
	if (options) {
		pageParams.value.id = options.id || ''
	}
	
	console.log('请假详情页面加载完成，pageParams:', pageParams.value)
})

// 页面显示时加载数据
onShow(() => {
	console.log('=== onShow 触发 ===')
	console.log('页面参数 pageParams:', pageParams.value)
	
	// 每次页面显示时都重新加载详情数据
	if (pageParams.value.id) {
		loadDetailData()
	}
})

// 获取状态样式类
const getStatusClass = (billStatus: string) => {
	switch (billStatus) {
		case '1':
			return 'status-draft' // 暂存
		case '2':
			return 'status-submitted' // 提交
		case '4':
			return 'status-approved' // 审核
		case '5':
			return 'status-cancelled' // 销假
		default:
			return 'status-default'
	}
}

// 跳转到编辑页面
const goToEdit = () => {
	// 跳转到新增页面，传入id参数使其变成编辑模式
	uni.navigateTo({
		url: `/pages/leave/add?id=${leaveDetail.id}`
	})
}
</script>

<style lang="scss" scoped>
.detail-leave-page {
	background-color: #F8F9FA;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

/* 详情内容 */
.detail-content {
	padding: 24rpx;
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

/* 详情区块 */
.detail-section {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.section-header {
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #333333;
}

/* 信息网格 */
.info-grid {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.info-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16rpx 0;
	border-bottom: 1rpx solid #F0F0F0;
	
	&:last-child {
		border-bottom: none;
	}
}

.info-label {
	font-size: 28rpx;
	color: #666666;
	flex: 1;
}

.info-value {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
	text-align: right;
	max-width: 60%;
	word-break: break-all;
}

/* 状态标签 */
.status-tag {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 500;
	
	&.status-draft {
		background-color: #E9ECEF;
		color: #6C757D;
	}
	
	&.status-submitted {
		background-color: #D1ECF1;
		color: #0C5460;
	}
	
	&.status-approved {
		background-color: #D4EDDA;
		color: #155724;
	}
	
	&.status-cancelled {
		background-color: #F8D7DA;
		color: #721C24;
	}
	
	&.status-default {
		background-color: #F8F9FA;
		color: #6C757D;
	}
}

/* 底部安全区域和按钮 */
.safe-area-bottom {
	height: env(safe-area-inset-bottom);
	background-color: #F8F9FA;
}

.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	padding: 24rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	border-top: 1rpx solid #E9ECEF;
	z-index: 99;
}

.edit-btn {
	width: 100%;
	padding: 24rpx;
	background-color: #007AFF;
	color: #FFFFFF;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 12rpx;
	border: none;
	transition: all 0.3s ease;
	
	&:active {
		background-color: #0056CC;
		transform: scale(0.98);
	}
}

.btn-text {
	font-size: 32rpx;
	font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.detail-content {
		padding: 20rpx;
	}
	
	.detail-section {
		padding: 20rpx;
		margin-bottom: 12rpx;
	}
	
	.section-title {
		font-size: 28rpx;
	}
	
	.info-item {
		padding: 12rpx 0;
	}
	
	.info-label,
	.info-value {
		font-size: 26rpx;
	}
	
	.edit-btn {
		font-size: 30rpx;
		padding: 20rpx;
	}
}
</style>
